<template>
    <div class="upload-container">
        <div class="flex-x-start">
            <div class="images" v-for="(item, index) in imgList" :key="index" >
                <el-image v-if="index < max" :src="item.filePath" :style="`width:${width}px;height:${height}px;`" fit="cover" />
                <div class="mask">
                    <div class="actions">
                    <span title="预览" @click="preview(item)">
                        <i class="el-icon-zoom-in" />
                    </span>
                        <span title="移除" @click="remove(index)">
                        <i class="el-icon-delete" />
                    </span>
                    </div>
                </div>
            </div>
            <el-upload
                    class="images-upload"
                    :show-file-list="false"
                    v-show="imgList.length < max"
                    action="#"
                    :headers="headers"
                    :name="name"
                    :before-upload="beforeUpload"
                    :http-request="handleUpload"
            >
                <div class="image-slot flex-y-center" :style="`width:${width}px;height:${height}px;`">
                    <i class="el-icon-plus" />
                </div>
            </el-upload>
        </div>

        <div v-if="!notip" class="el-upload__tip">
            <div style="display: inline-block;">
                <el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，单张图片大小不超过 ${ size }MB，且图片数量不超过 ${ max } 张`" type="info" show-icon :closable="false" />
            </div>
        </div>
        <el-image-viewer v-if="imageViewerVisible" :on-close="() => {imageViewerVisible = false}" :url-list="[dialogImageUrl]" />
    </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
    name: 'HImagesUpload',
    components: {
        ElImageViewer
    },
    props: {
        headers: {
            type: Object,
            default: () => {}
        },
        name: {
            type: String,
            default: 'file'
        },
        imgList: {
            type: Array,
            default: () => []
        },
        max: {
            type: Number,
            default: 3
        },
        size: {
            type: Number,
            default: 2
        },
        width: {
            type: Number,
            default: 120
        },
        height: {
            type: Number,
            default: 120
        },
        placeholder: {
            type: String,
            default: ''
        },
        notip: {
            type: Boolean,
            default: false
        },
        ext: {
            type: Array,
            default: () => ['jpg', 'png']
        }
    },
    data() {
        return {
            dialogImageUrl: '',
            imageViewerVisible: false,
        }
    },
    methods: {
        // 预览
        preview(item) {
            this.dialogImageUrl = item.filePath
            this.imageViewerVisible = true
        },
        // 移除
        remove(index) {
            let imgList = this.imgList
            imgList.splice(index, 1)
            console.log('remove',imgList)
            this.$emit('update:imgList', imgList)
        },
        beforeUpload(file) {
            const fileName = file.name.split('.')
            const fileExt = fileName[fileName.length - 1]
            const isTypeOk = this.ext.indexOf(fileExt) >= 0
            const isSizeOk = file.size / 1024 / 1024 < this.size
            if (!isTypeOk) {
                this.$message.error(`上传图片只支持 ${ this.ext.join(' / ') } 格式！`)
            }
            if (!isSizeOk) {
                this.$message.error(`上传图片大小不能超过 ${this.size}MB！`)
            }
            return isTypeOk && isSizeOk
        },
        handleUpload(file){
            this.$emit('handle-upload',file)
        },
    }
}
</script>

<style lang="less" scoped>
.upload-container {
    line-height: initial;
}
.images {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    overflow: hidden;
    .el-image {
        display: block;
    }
    .mask {
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 24px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: all 0.3s;
        .actions {
            width: 100px;
            height: 50px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            span {
                width: 50%;
                text-align: center;
                color: #fff;
                cursor: pointer;
                transition: all 0.1s;
                &.disabled {
                    color: #999;
                    cursor: not-allowed;
                }
                &:hover:not(.disabled) {
                    transform: scale(1.5);
                }
            }
        }
    }
    &:hover .mask {
        opacity: 1;
    }
}
.images-upload {
    display: inline-block;
    .image-slot {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #909399;
        font-size: 26px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        background-color: transparent;
    }
}
</style>
